<template>
  <div class="bottomArea publicZIndexBottomArea">
    <!-- 快捷用语 -->
    <div class="quickWish">
      <vue-scroll :ops="scrollOption">
        <div class="quickWishCt">
          <div
            :key="index"
            v-for="(item, index) in quickWishList"
            class="item"
            v-tap="{ methods: quickSend, message: { key: index, value: item } }"
          >
            <div class="itemCt">
              {{ item }}
            </div>
          </div>
        </div>
      </vue-scroll>
    </div>
    <div class="bottomMain publicVCenter" :class="{ show: sendDanmuVisible }">
      <div class="default" v-show="sendDanmuVisible">
        <vue-scroll :ops="scrollOption">
          <div class="defaultCt">
            <div
              :key="index"
              v-tap="{ methods: chooseWish, wish: item.wish }"
              v-for="(item, index) in wishList"
              class="item"
              :style="{ color: item.color, backgroundColor: item.backgroundColor }"
            >
              <div class="itemCt">
                {{ item.wish }}
              </div>
            </div>
          </div>
        </vue-scroll>
      </div>
      <div class="iptArea publicVCenter">
        <!-- 发送弹幕冷却倒计时 -->
        <div class="cooldown" v-show="isCd">{{ cd }}s</div>
        <!-- 输入框 -->
        <input
          class="inputBox"
          ref="inputBox"
          type="text"
          placeholder="发送您的弹幕..."
          v-model="message"
          :maxlength="canCustomizeInput ? 25 : 0"
          v-on:focus="focus"
          v-on:blur="blur"
        />
        <div class="sendBtn publicHvCenter" v-show="sendDanmuVisible" :class="{ active: message }" v-tap="{ methods: send }">发送</div>
      </div>
      <div class="menuArea" v-show="!sendDanmuVisible">
        <div class="menuBox publicHvCenter">
          <img
            src="@/assets/image/hdBar/superBapinIcon.png"
            class="menuSuperDanmuIcon"
            v-tap="{ methods: openPopupModule, key: superDanmuModuleKey }"
            v-if="giftSendVisible"
          />
        </div>
        <div class="menuBox publicHvCenter">
          <img
            src="@/assets/image/hdBar/danmuIcon.png"
            class="menuIcon"
            v-tap="{ methods: openPopupModule, key: danmuModuleKey }"
            v-if="giftSendVisible"
          />
        </div>
        <div class="menuBox publicHvCenter">
          <!-- <img src="@/assets/image/hdBar/photoWallIcon.png" class="menuIcon" v-tap="{ methods: toPhotoWall }" v-if="giftSendVisible" /> -->
          <img
            src="@/assets/image/hdBar/hbkdIconNew.png"
            class="menuIcon"
            v-tap="{ methods: openPopupModule, key: hbkdModuleKey }"
            v-if="giftSendVisible"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { WISH, POPUP_MODULE, QUICKWISH } from '@/assets/constant/index';
import { mapMutations, mapState } from 'vuex';
import { generateRandom, timeoutTask } from '@/utils/index';
import { sendChatMessage } from '@/api/chat/index';
import { superDanmuEntry } from '@/assets/constant/effect';

const wx = require('weixin-js-sdk');

export default {
  name: 'bottomArea',
  data() {
    return {
      isCd: false,
      cd: 5,
      isBtnLock: false, // 按钮锁 限制 点击按钮发送消息请求结束前不能再次点击
      sendDanmuVisible: false,
      message: '',
      wishList: [],
      quickWishList: [],
      scrollOption: {
        vuescroll: {},
        scrollPanel: {
          scrollingX: true,
          scrollingY: false,
          // 滚动的速度。在你点击滚动轨道或者调用scrollTo或者scrollBy的时候起作用。
          speed: 600,
          // 滚动动画
          easing: 'ease',
        },
        bar: {
          opacity: 0,
        },
      },
      danmuModuleKey: POPUP_MODULE.danmuModule.key,
      superDanmuModuleKey: POPUP_MODULE.superDanmuModule.key,
      hbkdModuleKey: POPUP_MODULE.hbkdModule.key,
      superDanmuEntryPath: superDanmuEntry,
    };
  },
  created() {
    // 随机取出三条快捷语
    const len = QUICKWISH.length;
    for (let i = 0; i < 3; i += 1) {
      this.quickWishList.push(QUICKWISH[generateRandom(0, len)]);
    }
  },
  computed: {
    ...mapState({
      giftSendVisible: (state) => state.app.giftSendVisible,
      canCustomizeInput: (state) => state.app.canCustomizeInput,
    }),
  },
  watch: {
    canCustomizeInput(value) {
      if (!value) {
        this.message = '';
      }
    },
  },
  methods: {
    ...mapMutations({
      togglePopup: 'app/togglePopup',
    }),
    blur() {
      this.sendDanmuVisible = false;
    },
    focus() {
      if (this.isCd) {
        this.$toast.center(`${this.cd}秒后可以继续发送弹幕!`);
        this.$refs.inputBox.blur();
        return;
      }
      this.setWishList();
      this.sendDanmuVisible = true;
      window.scrollTo(0, document.documentElement.clientHeight);
    },
    chooseWish(e) {
      this.message = e.wish;
    },
    setWishList() {
      const target = [];
      const wishLen = WISH.length;
      let wishIndex = 0;
      while (wishIndex < 5) {
        target[wishIndex] = {
          wish: WISH[Math.floor(Math.random() * wishLen)],
        };
        wishIndex += 1;
      }
      this.wishList = target;
    },
    openPopupModule(e) {
      this.togglePopup(e.key);
    },
    toPhotoWall() {
      wx.miniProgram.navigateTo({
        url: '/pages/photoWall/photoWall',
      });
    },
    // toLottery() {
    //   console.log('/pages/draw/draw');
    //   wx.miniProgram.navigateTo({
    //     url: '/pages/draw/draw',
    //   });
    // },
    quickSend(e) {
      if (this.isBtnLock) {
        return;
      }
      // 锁住按钮
      this.isBtnLock = true;
      sendChatMessage(e.message.value, 0)
        .then((res) => {
          console.log(res);
          // 按钮解锁
          this.isBtnLock = false;
          this.quickWishList.splice(e.message.key, 1);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    send() {
      if (!this.sendValidate()) {
        // 发送前的验证
        return;
      }
      // 锁住按钮
      this.isBtnLock = true;
      sendChatMessage(this.message, 0)
        .then((res) => {
          console.log(res);
          // 按钮解锁
          this.isBtnLock = false;
          this.$refs.inputBox.blur();
          // 冷却计时
          this.coolDown(5);
          // 清空输入框文字
          this.message = '';
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 冷却计时
    coolDown(time) {
      this.cd = time;
      this.isCd = true;
      timeoutTask(() => {
        this.cd -= 1;
        if (this.cd === 0) {
          this.isCd = false;
          return;
        }
        this.coolDown(this.cd);
      }, 1000);
    },
    // 发送消息前的验证
    sendValidate() {
      // 标识——是否可以发送消息
      let flag = true;
      // 冷却中或按钮被锁住
      if (this.isCd || this.isBtnLock) {
        flag = false;
      } else if (!this.message) {
        // 空消息
        this.$toast.center('发送消息不能为空!');
        flag = false;
      }
      return flag;
    },
  },
  beforeDestroy() {},
};
</script>
<style lang="less" scoped>
@import url('vuescroll/dist/vuescroll.css');
img {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;

  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
.bottomArea {
  width: 100%;
  height: 140px;
  position: absolute;
  bottom: 0;
  .quickWish {
    height: 69px;
    width: 100%;
    position: absolute;
    left: 0;
    top: -69px;
    .quickWishCt {
      white-space: nowrap;
      .item {
        font-size: 20px;
        color: #ffffff;
        margin: 0px 20px;
        display: inline-block;
        border-radius: 27px;
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
          linear-gradient(90deg, #5f9fdf, #ce6be4 100%, #e88655 100%);
        background-clip: content-box, padding-box;
        padding: 4px;
        overflow: hidden;
        position: relative;
        .itemCt {
          padding: 4px 12px;
        }
      }
    }
  }
  .bottomMain {
    width: 100%;
    padding: 0 20px;
    justify-content: space-between;
    .default {
      height: 90px;
      width: 100%;
      border-radius: 24px 24px 0 0;
      .defaultCt {
        white-space: nowrap;
        .item {
          font-size: 20px;
          color: #ffffff;
          margin: 0px 20px;
          display: inline-block;
          border-radius: 27px;
          background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
            linear-gradient(90deg, #5f9fdf, #ce6be4 100%, #e88655 100%);
          background-clip: content-box, padding-box;
          padding: 4px;
          overflow: hidden;
          position: relative;
          .itemCt {
            padding: 4px 12px;
          }
        }
      }
    }
    .iptArea {
      width: 292px;
      height: 72px;
      background-color: rgba(255, 255, 255, 0.4);
      box-shadow: inset 32px 86px rgba(0, 0, 0, 0.25);
      border-radius: 62px;
      backdrop-filter: blur(24px);
      position: relative;
      .cooldown {
        color: #fff;
        font-size: 28px;
        position: absolute;
        right: 15px;
      }
      .inputBox {
        width: 292px;
        height: 72px;
        background-color: transparent;
        border-radius: 36px;
        border: none;
        font-size: 24px;
        padding: 0 98px 0 28px;
        color: #fff;
        position: absolute;
        outline: none;
        box-sizing: border-box;
        &::placeholder {
          color: rgba(255, 255, 255, 0.6);
        }
      }
      .sendBtn {
        width: 80px;
        height: 45px;
        font-size: 24px;
        color: rgba(255, 255, 255, 0.6);
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
        right: 8px;
        border-radius: 34px;
        &.active {
          background-color: #e4156a;
          color: #fff;
        }
      }
    }
    .menuArea {
      display: flex;
      .menuBox {
        width: 92px;
        height: 92px;
        background-color: rgba(255, 255, 255, 0.4);
        box-shadow: inset 32px 86px rgba(0, 0, 0, 0.25);
        border-radius: 50%;
        backdrop-filter: blur(24px);
        margin-right: 32px;
        .menuSuperDanmuIcon {
          width: 68px;
          height: 58px;
        }
        .menuIcon {
          width: 64px;
          height: 60px;
        }
        &:nth-child(3) {
          margin-right: 0;
        }
      }
    }
    &.show {
      flex-direction: column;
      justify-content: center;
      background: linear-gradient(135deg, #183a6a, #1351a3);
      height: 260px;
      position: absolute;
      bottom: 0;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      .iptArea {
        width: 700px;
        .msgIcon {
          display: none;
        }
        .inputBox {
          width: 700px;
        }
        &::after {
          display: none;
        }
      }
    }
  }
}
</style>
